<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <title>五下第12课《条件计算》空调模拟</title>
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        
        .card-effect {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .bounce-in {
            animation: bounceIn 0.6s ease-out;
        }
        
        @keyframes bounceIn {
            0% {
                transform: scale(0.3);
                opacity: 0;
            }
            50% {
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        
        .pulse-animation {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: .5;
            }
        }
    </style>
</head>

<body class="gradient-bg min-h-screen flex items-center justify-center">
    <div class="absolute inset-0 bg-black opacity-10"></div>
    
    <!-- 游戏内容 -->
    <div id="gameContent" relative z-10>
        <div class="card-effect rounded-2xl p-8 shadow-2xl text-center w-full max-w-4xl mx-4">
            <!-- 游戏标题 -->
            <div class="mb-6">
                <h1 class="text-4xl font-bold text-gray-800 mb-2">❄️🔥 空调模拟</h1>
                <p class="text-gray-600">五下第12课《条件计算》</p>
            </div>
            
            <!-- 提示信息 -->
            <div class="bg-blue-50 border border-blue-200 text-blue-800 p-4 rounded-lg mb-6">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
                    </div>
                    <div class="text-left">
                        <p class="font-medium mb-1 text-xl">操作说明：</p>
                        <ul class="list-disc list-inside space-y-1 text-base">
                            <li>启动制冷模式，可以使室内温度每秒降低 0.1°C</li>
                            <li>启动制热模式，可以使室内温度每秒升高 0.1°C</li>
                            <li>设置目标温度后，系统将自动调节</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- 空调模拟区域 -->
            <div class="relative mx-auto rounded-xl overflow-hidden shadow-lg" style="width: 800px; height: 350px;">
                <img id="kongtiaoImage" src="heng_wen/kongtiao.png" class="w-full h-full object-cover">
                
                <!-- 温度显示区域 -->
                <div class="bg-yellow-400 bg-opacity-90 border-2 border-yellow-500 rounded-lg px-4 py-3 shadow-lg absolute flex items-center justify-center" style="top: 50px; left: 300px; width: 200px;">
                    <div class="flex items-center">
                        <i class="fas fa-thermometer-half text-yellow-800 mr-2"></i>
                        <span class="font-medium text-yellow-900">当前室温:</span>
                        <span id="temperature_now" class="font-bold text-xl ml-2">26.3</span>
                        <span class="font-medium text-yellow-900 ml-1">°C</span>
                    </div>
                </div>
                
                <!-- 控制面板 -->
                <div class="bg-blue-200 bg-opacity-90 rounded-lg p-4 shadow-lg absolute flex items-center justify-center" style="bottom: 50px; left: 150px;">
                    <button id="fanButton" onclick="toggleCooling()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 mr-4">
                        <i class="fas fa-snowflake mr-2"></i>制冷模式
                    </button>
                    <button id="heaterButton" onclick="toggleHeating()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 mr-4">
                        <i class="fas fa-fire mr-2"></i>制热模式
                    </button>
                    <div class="flex items-center bg-white bg-opacity-80 rounded-lg px-3 py-2 shadow">
                        <span class="text-gray-700 font-medium mr-2">设置温度:</span>
                        <input type="number" id="temperature_set" value="25.0" min="15.0" max="35.0" step="0.1" class="w-24 px-3 py-1 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <span class="text-gray-700 font-medium ml-2">°C</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        let isCooling = false; // 制冷模式是否开启
        let isHeating = false; // 制热模式是否开启
        let temperatureNow = 26.3; // 初始温度
    
        // 切换制冷模式
        function toggleCooling() {
            const fanButton = document.getElementById('fanButton');
            const heaterButton = document.getElementById('heaterButton');
            const kongtiaoImage = document.getElementById('kongtiaoImage');
            
            if (isHeating) { // 如果正在加热
                isHeating = false; // 停止加热
                // 将加热按钮样式切换回原来的样式
                heaterButton.className = "bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 mr-4";
                heaterButton.innerHTML = '<i class="fas fa-fire mr-2"></i>制热模式';
            }
            isCooling = !isCooling; // 切换制冷状态
            // 根据制冷状态切换图片和按钮样式
            kongtiaoImage.src = isCooling ? "heng_wen/kongtiao_leng.png" : "heng_wen/kongtiao.png";
            // 更新制冷按钮的样式，如果正在制冷，则显示制冷中的样式，否则恢复到原始样式
            if (isCooling) {
                fanButton.className = "bg-blue-800 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 mr-4 ring ring-blue-300";
                fanButton.innerHTML = '<i class="fas fa-snowflake mr-2"></i>制冷中';
            } else {
                fanButton.className = "bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 mr-4";
                fanButton.innerHTML = '<i class="fas fa-snowflake mr-2"></i>制冷模式';
            }
        }
    
        // 切换制热模式
        function toggleHeating() {
            const fanButton = document.getElementById('fanButton');
            const heaterButton = document.getElementById('heaterButton');
            const kongtiaoImage = document.getElementById('kongtiaoImage');
            
            if (isCooling) { // 如果正在制冷
                isCooling = false; // 停止制冷
                // 将制冷按钮样式切换回原来的样式
                fanButton.className = "bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 mr-4";
                fanButton.innerHTML = '<i class="fas fa-snowflake mr-2"></i>制冷模式';
            }
            isHeating = !isHeating; // 切换制热状态
            // 根据制热状态切换图片和按钮样式
            kongtiaoImage.src = isHeating ? "heng_wen/kongtiao_re.png" : "heng_wen/kongtiao.png";
            // 更新制热按钮的样式，如果正在制热，则显示制热中的样式，否则恢复到原始样式
            if (isHeating) {
                heaterButton.className = "bg-red-800 hover:bg-red-900 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 mr-4 ring ring-red-300";
                heaterButton.innerHTML = '<i class="fas fa-fire mr-2"></i>制热中';
            } else {
                heaterButton.className = "bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 mr-4";
                heaterButton.innerHTML = '<i class="fas fa-fire mr-2"></i>制热模式';
            }
        }
    
        // 每隔 1 秒执行一次以下的函数
        setInterval(function(){
            // 获取设置的温度
            let temperatureSet = parseFloat(document.getElementById("temperature_set").value);

            if(isCooling && temperatureNow > temperatureSet) {
                // 如果正在制冷且当前温度大于设置的温度，将当前温度降低 0.1
                temperatureNow -= 0.1;
            } else if(isHeating && temperatureNow < temperatureSet) {
                // 如果正在制热且当前温度小于设置的温度，将当前温度增加 0.1
                temperatureNow += 0.1;
            } else {
                // 当前温度等于设置的温度时，停止制冷或制热
                isCooling = false;
                isHeating = false;
                // 将按钮样式切换回原来的样式
                document.getElementById('fanButton').className = "bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 mr-4";
                document.getElementById('fanButton').innerHTML = '<i class="fas fa-snowflake mr-2"></i>制冷模式';
                document.getElementById('heaterButton').className = "bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition-all duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-500 mr-4";
                document.getElementById('heaterButton').innerHTML = '<i class="fas fa-fire mr-2"></i>制热模式';
                // 将图片切换回默认状态
                document.getElementById('kongtiaoImage').src = "heng_wen/kongtiao.png";
            }

            // 更新显示的当前温度，保留一位小数
            document.getElementById("temperature_now").innerText = temperatureNow.toFixed(1);

        }, 1000);
    
        // 监听输入框的 input 事件
        document.getElementById("temperature_set").addEventListener("input", function() {
            let value = parseFloat(this.value);
            if (value < 15.0) {
                this.value = "15.0";
            } else if (value > 35.0) {
                this.value = "35.0";
            }
        });

    </script>

</body>
</html>